<template>
  <el-dialog
    title="发布课题"
    :close-on-click-modal="false"
    :visible.sync="visible"
    width="40%"
    custom-class="keti-dialog">
    <!-- 课程信息展示 -->
    <el-card class="course-info-card" shadow="never">
      <div slot="header" class="card-header">
        <span>课程信息</span>
      </div>
      <el-form :model="courseInfo" label-width="120px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="课程名称">
              <span>{{ courseInfo.kechengmingcheng }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="课程类型">
              <span>{{ courseInfo.kechengleixing }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="班级">
              <span>{{ courseInfo.banji }}</span>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="教师姓名">
              <span>{{ courseInfo.jiaoshixingming }}</span>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>

    <!-- 课题信息输入 -->
    <el-card class="keti-form-card" shadow="never">
      <div slot="header" class="card-header">
        <span>课题信息</span>
      </div>
      <el-form :model="ketiForm" label-width="120px" :rules="rules" ref="ketiForm">
        <el-form-item label="课题名称" prop="ketiName">
          <el-input v-model="ketiForm.ketiName" placeholder="请输入课题名称"></el-input>
        </el-form-item>
        <el-form-item label="课题要求" prop="requirement">
          <el-input
            type="textarea"
            :rows="4"
            placeholder="请输入课题要求"
            v-model="ketiForm.requirement">
          </el-input>
        </el-form-item>
        <!-- 截止时间 -->
        <el-form-item label="截止时间" prop="deadline">
          <el-date-picker
            v-model="ketiForm.deadline"
            type="datetime"
            placeholder="请选择截止时间"
            value-format="yyyy-MM-dd HH:mm:ss"
            format="yyyy-MM-dd HH:mm:ss"
            style="width: 100%;"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="发布状态" prop="status">
          <el-radio-group v-model="ketiForm.status">
            <el-radio label="未发布">未发布</el-radio>
            <el-radio label="已发布">已发布</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
    </el-card>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      visible: false,
      courseInfo: {
        kechengmingcheng: '',
        kechengleixing: '',
        banji: '',
        xueqi: '',
        xingqi: '',
        shangkeshijian: '',
        jiaoshigonghao: '',
        jiaoshixingming: ''
      },
      ketiForm: {
        ketiName: '',
        requirement: '',
        status: '未发布',
        deadline: ''
      },
      rules: {
        ketiName: [
          { required: true, message: '请输入课题名称', trigger: 'blur' }
        ],
        requirement: [
          { required: true, message: '请输入作业要求', trigger: 'blur' }
        ],
        deadline: [
          { required: true, message: '请选择截止时间', trigger: 'change' }
        ]
      }
    }
  },
  methods: {
    init(id) {
      this.visible = true
      // 获取课程信息
      this.$http({
        url: `/zuoyebuzhi2/kecheng/detail/${id}`,
        method: 'get'
      }).then(({ data }) => {
        if (data && data.code === 0) {
          this.courseInfo = data.data
        }
      })
      // 重置课题表单
      this.ketiForm = {
        ketiName: '',
        requirement: '',
        status: '未发布',
        deadline: ''
      }
    },
    onSubmit() {
      // 构造提交数据
      const zuoyebuzhiEntity = {
        kechengmingcheng: this.courseInfo.kechengmingcheng,
        banji: this.courseInfo.banji,
        xueqi: this.courseInfo.xueqi,
        jiaoshigonghao: this.courseInfo.jiaoshigonghao,
        jiaoshixingming: this.courseInfo.jiaoshixingming,
        ketimingcheng: this.ketiForm.ketiName,
        zuoyeyaoqiu: this.ketiForm.requirement,
        status: this.ketiForm.status,
        faburiqi: new Date(),
        deadline: this.ketiForm.deadline
      }

      // 调用保存接口
      this.$http({
        url: '/zuoyebuzhi2/keti',
        method: 'post',
        data: zuoyebuzhiEntity
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message({
            message: '保存成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    }
  }
}
</script>

<style scoped>
.keti-dialog {
  border-radius: 8px;
}

.course-info-card,
.keti-form-card {
  margin-bottom: 20px;
  border-radius: 6px;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,0.05);
  border: 1px solid #e6ebf5;
}

.card-header {
  display: flex;
  align-items: center;
  color: #409EFF;
  font-size: 15px;
  font-weight: bold;
  padding: 12px 15px;
  line-height: 1;
  background-color: #f5f7fa;
  border-bottom: 1px solid #e6ebf5;
}

.el-form-item {
  margin-bottom: 22px;
}

.el-form {
  padding: 20px;
}

.el-card__header {
  padding: 12px 15px;
}

.dialog-footer {
  text-align: right;
  padding-top: 15px;
  border-top: 1px solid #e6ebf5;
}

.el-button {
  padding: 8px 20px;
  font-size: 14px;
  height: 36px;
}

.el-button + .el-button {
  margin-left: 12px;
}

.el-input__inner {
  height: 36px;
  line-height: 36px;
  border-color: #dcdfe6;
}

.el-input__inner:hover {
  border-color: #c0c4cc;
}

.el-input__inner:focus {
  border-color: #409EFF;
}

.el-textarea__inner {
  font-family: Arial, sans-serif;
  padding: 8px 15px;
  min-height: 120px !important;
  border-color: #dcdfe6;
}

.el-textarea__inner:hover {
  border-color: #c0c4cc;
}

.el-textarea__inner:focus {
  border-color: #409EFF;
}

.el-radio {
  line-height: 36px;
  margin-right: 20px;
  font-size: 14px;
  color: #606266;
}

.el-form-item__label {
  line-height: 36px;
  padding-bottom: 0;
  font-size: 14px;
  color: #606266;
  font-weight: 500;
}

.el-form-item__content {
  line-height: 36px;
}

.course-info-card .el-form-item__content {
  color: #303133;
  font-weight: 500;
}
</style> 